import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Link } from 'dva/router';
import {
    Row, Col, Card, Form, Input, Select, Icon,
    Button, Dropdown, Menu, InputNumber,
    DatePicker, Modal, message, Badge,
    Divider, Tag, Table
} from 'antd';
import StandardTable from '../../components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './RecordList.less';

/*
 申请管理视频面签列表界面
*/
const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Option } = Select;
const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');

const { MonthPicker, RangePicker } = DatePicker;
const stateCredit = ['未接听', '已面签'];
@connect(({ queries }) => ({
    queries,
}))
@Form.create()
export default class RecordList extends PureComponent {
    state = {
    };
 
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'queries/videoList',
            payload: {
                offset: 0,
                limit: 10,
            },
        });
    }

    columns = [{
        title: '客户姓名',
        dataIndex: 'custName',
        key: 'custName',
    }, {
        title: '证件号',
        dataIndex: 'idcard',
        key: 'idcard',
    }, {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile',
    }, {
        title: '贷款金额',
        dataIndex: 'loanAmt',
        key: 'loanAmt',
    }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render(val) {
            return stateCredit[val-1];
        },
    }, {
        title: '合作支行',
        dataIndex: 'corpBank',
        key: 'corpBank',
    }, {
        title: '操作',
        render: (text, record) => (
            <Fragment>
                <Link to={`/reporting/record-details?id=${record.id}`}>详情</Link>
            </Fragment>
        ),
    }];

    handleStandardTableChange = (pagination, filtersArg, sorter) => {

        const { dispatch } = this.props;
        const { formValues } = this.state;

        const filters = Object.keys(filtersArg).reduce((obj, key) => {
            const newObj = { ...obj };
            newObj[key] = getValue(filtersArg[key]);
            return newObj;
        }, {});
        const params = {
            offset: (pagination.current - 1) * pagination.pageSize,
            limit: pagination.pageSize,
            ...formValues,
            ...filters,
        };
        dispatch({
            type: 'queries/videoList',
            payload: params,
        });
    }

    handleSearch = () => {
        const { validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((error, values) => {
            if (!error) {
                this.props.dispatch({
                    type: 'queries/videoList',
                    payload: {
                        custName: values.custName,
                        mobile: values.mobile
                    },
                    callback: () => {
                        this.props.dispatch({
                            type: 'queries/videoList',
                            payload: {
                                offset: 0,
                                limit: 10,
                            },
                        });
                    },
                })
                // this.props.form.resetFields();
            }
        });
    };

    handleFormReset = () => {
        const { form, dispatch } = this.props;
        form.resetFields();
        this.setState({
            value: '',
        });
        dispatch({
            type: 'queries/videoList',
            payload: {
                offset: 0,
                limit: 10,
            },
        });
    }

    renderSimpleForm() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form onSubmit={this.handleSearch} layout="inline">
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <Col md={10} sm={24}>
                        <FormItem label="客户名称">
                            {getFieldDecorator('custName')(
                                <Input placeholder="请输入" />
                            )}
                        </FormItem>
                    </Col>
                    <Col md={10} sm={24}>
                        <FormItem label="手机号码">
                            {getFieldDecorator('mobile')(
                                <Input placeholder="请输入" />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                    <p style={{ textAlign: 'right' }} className={styles.submitButtons}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                        <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
                    </p>
                </Row>
            </Form>
        );
    }

    render() {
        const { queries: { videoSignList, page, loading } } = this.props;

        return (
            <PageHeaderLayout title="面签列表">
                <Card bordered={false}>
                    <div className={styles.tableList}>
                        <div className={styles.tableListForm}>
                            {this.renderSimpleForm()}
                        </div>
                        {/* {JSON.stringify(videoSignList)} */}
                        <Table
                            dataSource={videoSignList}
                            columns={this.columns}
                            loading={loading}
                            pagination={page}
                            bordered
                            rowKey="id"
                            onChange={this.handleStandardTableChange}
                        />
                    </div>
                </Card>

            </PageHeaderLayout>
        );
    }
}
